<template>
    <div style="padding: 8px;">
        <el-card>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="用户ID">
                    <el-input size="small" v-model="formInline.userId" placeholder="用户ID"></el-input>
                </el-form-item>
                <el-form-item label="用户名称">
                    <el-input size="small" v-model="formInline.userName" placeholder="用户名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
                    <el-button size="small" type="primary" @click="reSet">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card v-loading="loading" style="margin-top: 8px;">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column width="150" prop="createTime" label="日期">
                </el-table-column>
                <el-table-column width="70" prop="userId" label="用户ID">
                </el-table-column>
                <el-table-column width="160" prop="userName" label="用户">
                </el-table-column>
                <el-table-column prop="messageText" label="留言内容">
                </el-table-column>
                <el-table-column label="留言图片">
                    <template #default="{ row }">
                        <el-image :previewSrcList="[item]" v-for="item in row.picList" :key="item"
                            style="width:50px; height:50px;" :src="item" fit="fit"></el-image>
                    </template>
                </el-table-column>
                <el-table-column width="80" prop="messageType" label="留言类型">
                    <template #default="{ row }">
                        <span>{{ row.messageType == 1 ? '客户' : '管理员' }}</span>
                    </template>
                </el-table-column>
                <el-table-column width="100" label="操作">
                    <template #default="{ row }">
                        <el-button v-if="row.messageType == 1" @click="show(row.id)" type="text">
                            {{ row.readStatus ? '已回复' : '回复' }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="float: right;margin: 5px 0;" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total">
            </el-pagination>
        </el-card>
        <el-dialog width="30%" title="回复" :visible.sync="dialogFormVisible" :before-close="handleClose">
            <el-form label-width="80px" :model="form">
                <el-form-item label="回复内容">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.name">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="reply">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getMessageBoardListApi, getMessageBoardApi } from '@/api/appuser/messageBoard'
export default {
    data() {
        return {
            loading: false,
            tableData: [{}],
            formInline: {
                userId: null,
                userName: null,
            },
            total: 0,
            page: {
                pageNum: 1,
                pageSize: 10,
            },
            dialogFormVisible: false,
            form: {
                id: "",
                name: '',
            },
        };
    },
    created() {
        this.getMessageBoardList()
    },
    methods: {
        onSubmit() {
            this.page = {
                pageNum: 1,
                pageSize: 10,
            }
            this.getMessageBoardList()
        },
        async getMessageBoardList() {
            this.loading = true
            const res = await getMessageBoardListApi({
                ...this.page,
                ...this.formInline
            })
            console.log(res);
            this.tableData = res.list
            this.total = res.total
            this.loading = false
        },
        reSet() {
            this.page = {
                pageNum: 1,
                pageSize: 10,
            }
            this.formInline = {
                userId: null,
                userName: null,
            }
            this.getMessageBoardList()
        },
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.getMessageBoardList();
        },
        handleCurrentChange(val) {
            this.page.pageNum = val;
            this.getMessageBoardList();
        },
        show(id) {
            this.form.id = id
            this.dialogFormVisible = true
        },
        handleClose() {
            this.dialogFormVisible = false
            this.form = {
                id: "",
                name: '',
            }
            this.getMessageBoardList()
        },
        async reply() {
            await getMessageBoardApi({
                parentId: this.form.id,
                messageText: this.form.name,
            })
            this.$message.success('回复成功')
            this.handleClose()
        }

    },
};
</script>
<style lang='' scoped>
</style>